<template>

  <div>
    <h1>活动评价</h1>
    <a-table :dataSource="activities" rowKey="activityId">
      <a-table-column title="活动名称" dataIndex="name" key="name" />
      <a-table-column title="评价" key="action">
        <template v-slot="{ record }">
          <a-button @click="openReviewModal(record.activityId)">评价</a-button>
        </template>
      </a-table-column>
    </a-table>
    <a-modal v-model:visible="isModalVisible" title="评价活动" @ok="submitReview">
      <a-textarea v-model:value="reviewContent" placeholder="输入评价内容" />
    </a-modal>
  </div>

</template>

<script setup lang="ts">

import {ref, onMounted, computed} from 'vue';
import { useActivityStore } from '@/stores/activity';
import { useActivityReviewStore } from '@/stores/activityReview';
import { Modal } from 'ant-design-vue';
import {useUserStore} from "@/stores/user.ts";
import axios from '../api/request.ts';

const activityStore = useActivityStore();
const activityReviewStore = useActivityReviewStore();
const userStore = useUserStore();


const isModalVisible = ref(false);
const reviewContent = ref('');
const selectedActivityId = ref<number | null>(null);
const activities = ref([] as any[]);

const userId = userStore.userId;


onMounted(async () => {
  try {
      const response = await axios.get(`/activities/userActivityList/${userStore.userId}`);
      activities.value = response.data;
  } catch (error) {
      console.error('Error fetching activities:', error);
  }
});

const openReviewModal = (activityId: number) => {
  selectedActivityId.value = activityId;
  isModalVisible.value = true;
};

const submitReview = async () => {
  if (selectedActivityId.value !== null && reviewContent.value.trim()) {
    await activityReviewStore.addReview({
      activityId: selectedActivityId.value,
      userId: userId,
      reviewContent: reviewContent.value,
    });
    isModalVisible.value = false;
    reviewContent.value = '';
  }
};
</script>

<!--<style scoped>-->
<!--/* 定义表格样式 */-->
<!--table {-->
<!--  width: 100%;-->
<!--  border-collapse: collapse;-->
<!--}-->
<!--th, td {-->
<!--  border: 1px solid black;-->
<!--  padding: 8px;-->
<!--  text-align: left;-->
<!--}-->
<!--/* 定义按钮样式 */-->
<!--button {-->
<!--  background-color: #4CAF50;-->
<!--  color: white;-->
<!--  border: none;-->
<!--  padding: 5px 10px;-->
<!--  cursor: pointer;-->
<!--}-->
<!--/* 定义按钮悬停样式 */-->
<!--button:hover {-->
<!--  background-color: #45a049;-->
<!--}-->
<!--</style>-->